<template>
  <div class="node-panel">
    <div class="node-item" @mousedown="openSelection()">
      <div class="node-item-icon selection"></div>
      <span class="node-label">选区</span>
    </div>
    <div class="node-item" @mousedown="addStartNode()">
      <div class="node-item-icon start"></div>
      <span class="node-label">开始节点</span>
    </div>
    <div class="node-item" @mousedown="addGeneralNode()">
      <div class="node-item-icon general"></div>
      <span class="node-label">普通节点</span>
    </div>
    <div class="node-item" @mousedown="addConditionNode()">
      <div class="node-item-icon condition"></div>
      <span class="node-label">条件节点</span>
    </div>
    <div class="node-item" @mousedown="addEndNode()">
      <div class="node-item-icon end"></div>
      <span class="node-label">结束节点</span>
    </div>
  </div>
</template>



<script>
import LogicFlow from "@logicflow/core";

import CustomEnd from "@/registerNode/CustomEnd";
import CustomStart from "@/registerNode/CustomStart";
import CustomHtml from "@/registerNode/CustomHtml";
import CustomRect from "@/registerNode/CustomRect";
import CustomPolygon from "@/registerNode/CustomPolygon";

import { ElMessage } from "element-plus";

export default {
  name: "NodePanel",
  data() {
    return {};
  },
  props: {
    lf: Object
  },
  mounted() {
    let lf = this.lf;
    lf.on("selection:selected", () => {
      lf.updateEditConfig({
        stopMoveGraph: false,
      });
    });
    this.registerNode();
  },
  methods: {
    registerNode() {
      let lf = this.lf;
      lf.register(CustomStart)
      lf.register(CustomEnd)
      lf.register(CustomPolygon)
      lf.register(CustomHtml)
      lf.register(CustomRect)

      //注册非业务事件，业务事件需要放在上一层
      lf.on("connection:not-allowed", (data) => {
        ElMessage({
          type: "error",
          message: data.msg,
        });
      });

      lf.on("custom:button-click", (model) => {
        console.log('custom:button-click')
        lf.setProperties(model.id, {
          body: "LogicFlow",
        });
      });
    },
    openSelection() {
      this.lf.updateEditConfig({
        stopMoveGraph: true,
      });
    },
    addStartNode() {
      this.lf.dnd.startDrag({
          type: "CustomStart",
          text: "开始",
          properties: { start: "开始" }, //自定义属性，同时导出的文件节点属性上会生成
          });
    },
    addEndNode() {
      this.lf.dnd.startDrag({
        type: "CustomEnd",
        text: "结束",
      });
    },
    addGeneralNode() {
      this.lf.dnd.startDrag({
        type: "CustomRect",
        text: "普通节点",
        properties: { CustomRect: "矩形" }, //自定义属性，同时导出的文件节点属性上会生成
      });
    },
    addConditionNode() {
      this.lf.dnd.startDrag({
        type: "CustomPolygon",
        text: "条件节点",
      });
    },
    addHtmlNode() {
      this.lf.dnd.startDrag({
        type: "CustomHtml",
        text: "",
        properties: { text: "点击修改标题"}, //自定义属性，同时导出的文件节点属性上会生成
      });
    },
  }

}

</script>

<style>
.node-panel {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 50px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}
.node-item {
  margin-bottom: 10px;
}
.node-item-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background-size: cover;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.selection {
  background: url()
  center center no-repeat;
  cursor: grab;
}

.start {
  background: url()
  center center no-repeat;
  cursor: grab;
}
.end {
  background: url()
  center center no-repeat;
  cursor: grab;
}
.general {
  background: url()
  center center no-repeat;
  cursor: grab;
}
.html {
  background: url()
  center center no-repeat;
  cursor: grab;
}

.condition {
  background: url()
  center center no-repeat;
  cursor: grab;
}


/*******************纯html格式的样式****************/

.lf-html-wrapper {
  width:100px;
  height:100px;
}
.lf-html-wrapper .custom-html {
  width:96px;
  height:96px;
  border:2px solid #2987ff;
}

.lf-html-wrapper .custom-head {
  color:red;
  height:26px;
  line-height:26px;
}

.lf-html-wrapper .custom-body {
  color:#2987ff;
  height:50px;
  line-height:50px;
}


</style>
